import React, { useState } from "react";

interface Props {
  defaultValue?: Date;
  onChange?: (value: Date) => void;
}

const Calendar = (props: Props) => {
  // console.log("非受控render...")
  const { defaultValue = new Date(), onChange } = props;
  const [value, setValue] = useState(defaultValue);
  const changeValue = (value: Date) => {
    setValue(value);
    onChange?.(value);
  };
  return (
    <div className="mt-4">
      {value.toLocaleDateString()}
      <div
        onClick={() => {
          changeValue(new Date("2024-08-15"));
        }}
      >
        2024-08-15
      </div>
      <div
        onClick={() => {
          changeValue(new Date("2024-08-16"));
        }}
      >
        2024-08-16
      </div>
      <div
        onClick={() => {
          changeValue(new Date("2024-08-17"));
        }}
      >
        2024-08-17
      </div>
    </div>
  );
};
export default Calendar;
